window.onload =function () {
    //加载读取界面
    setTimeout(function () {
        $('.bg-loading').css("display","none");
        game.init()
    },2000);

    function Game(x){
        this.cont=$('.game-cont');/*游戏面板*/
        this.button = $('.game-btn');/*游戏按钮*/
        this.index=0; /*猜拳过程中玩家选择的石头剪刀布的下标 默认是按钮1 */
        this.enemyNum=0; /*电脑出拳图片的下标值*/
        this.resultNum=0;/*显示结果的下标值 0是平局 1是输 2是赢*/
        this.page = x.page;
        this.numX = x.numX
        this.call = x.call //回调函数


    }
    Game.prototype={
        // 初始化
        init:function () {
            this.createBody();
            this.gameTime();

        },
        //创建开始界面
        createBody:function () {
            //游戏动画界面
            for (var i= 0;i<3;i++){
                this.cont[0].innerHTML += "<div class='list"+(i+1)+"'></div>"
            }
            //第一关图片替换出 图片名为'./images/bg-round"+index+".png'
            $(".list1").css("background-image","url('./images/bg-round"+(this.page+1)+".png')");
            //按钮界面
            for (var i= 0;i<3;i++){
                this.button[0].innerHTML += "<a class='btn"+(i+1)+" btn'></a>"
            }
        },


        //倒计时界面
        gameTime:function(){
        var content = this.cont;
        //两秒后进行倒计时
        setTimeout(function () {
            var num =5;
            function gameTime() {
                //清空页面内容
                if (num>0){
                    //创建倒计时图片 图片名为"daojishi+i" 更改图片名后下面无法生效
                    content[0].innerHTML="<img class='game-time' src='images/daojishi"+num+".png'>";
                    num--
                }else {
                    clearInterval(time);
                    game.result();/*回调函数 里面执行game.result*/
                    game.call();
                }
            }
            //每一秒中倒计时1次
            var time=setInterval(gameTime,1000);

        },2000)
            game.btn();
    },


        //猜拳界面
        result:function(){
            //猜拳的过程创建图片 7秒后生成图片 玩家图片名为+images/player"+index+".png 敌人图片名为images/enemy"+(index+".png 结果图片名为images/result"+index+".png
            var content = this.cont;
            var This = this;
            //7秒后弹出猜拳动画
                This.compute(This.numX);/*判断胜负平 0是平局 1是输 2是赢*/
                content[0].innerHTML = "<img class='game-player' src='images/player"+(This.index+1)+".png'><img class='game-enemy' src='images/enemy"+(This.enemyNum+1)+".png'><img class='game-result' src='images/result"+(This.resultNum+1)+".png'>";
        },


        //判断胜负平
        compute:function(resultNum){
                //  平局
                if(resultNum === 0){
                    this.enemyNum=game.index;
                    this.resultNum = 0
                }else if(resultNum ===1){ /*输*/
                    if(game.index<2){
                        this.enemyNum = game.index+1
                        this.resultNum = 1
                    }else {
                        this.enemyNum = 0;
                        this.resultNum = 1
                    }
                }else if(resultNum === 2) {/*赢*/
                    if (game.index > 0) {
                        this.enemyNum = game.index - 1;
                        this.resultNum = 2
                    } else {
                        console.log(game.index)
                        this.enemyNum = 2;
                        this.resultNum = 2
                    }
                }
            },



        //按钮选择界面
        btn:function () {
            var This = this;
            $(".game-btn .btn").click(function () {
                $(this).addClass("on").siblings().removeClass("on");
               This.index=($(this).index());
            });
        },



    };
    var x ={
        page:5,
        numX:1,
        call:function () {alert(1)}
    };
    var game = new Game(x);


};

